<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input
          v-model="params.goodsName"
          placeholder="商品名称"
          clearable
          style="width: 200px"
        />
      </div>
      <div class="hs-screen-row">
        <Cascader
          v-model="params.goodsType"
          :data="goodsTypeData"
          placeholder="商品分类"
          @on-change="selectGoodsType"
        ></Cascader>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.isUpShelf"
          placeholder="上架状态"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="0">下架</Option>
          <Option value="1">上架</Option>
          <Option value="2">待上架</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.isToKs"
          placeholder="发布状态"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="1">已发布</Option>
          <Option value="0">未发布</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.freightRule"
          placeholder="运费类型"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="1">固定运费</Option>
          <Option value="2">运费模板</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.isRecommend"
          placeholder="店长推荐"
          clearable
          style="width:150px"
        >
          <Option value="">全部</Option>
          <Option value="0">否</Option>
          <Option value="1">是</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <Select
          v-model="params.isClassic"
          placeholder="经典花束"
          clearable
          style="width:150px"
        >
          <Option value="">全部</Option>
          <Option value="0">否</Option>
          <Option value="1">是</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <DatePicker
          @on-change="changeDate"
          v-model="dateInit"
          type="daterange"
          :editable="false"
          separator=" ~ "
          split-panels
          transfer
          placeholder="创建时间"
          style="width: 200px"
        ></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>商品列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="showGoodsOpe(2)">新增商品</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 10px">
        <Button type="dashed" @click="batchOpe(1)">批量上架</Button>
        <Button style="margin-left: 10px" type="dashed" @click="batchOpe(0)"
          >批量下架</Button
        >
        <!-- <Button type="dashed" @click="ksPurchaseOpe(true)">批量开启团购</Button>
        <Button type="dashed" @click="batchOpe(false)">批量下架团购</Button> -->
      </div>
      <!--表格数据-->
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
        @on-select="selectTable"
        @on-select-cancel="selectCancelTable"
        @on-select-all="selectAllTable"
        @on-select-all-cancel="selectAllCancelTable"
      >
        <template slot-scope="{ row, index }" slot="isUpShelf">
          <Tag color="default" v-if="row.isUpShelf === 0" size="default"
            >下架</Tag
          >
          <Tag color="green" v-if="row.isUpShelf === 1" size="default"
            >上架</Tag
          >
          <Tag color="volcano" v-if="row.isUpShelf === 2" size="default"
            >待上架</Tag
          >
        </template>

        <template slot-scope="{ row, index }" slot="isClassic">
          <i-switch
            v-model="row.isClassic === 1"
            @on-change="updateClassic(row)"
          >
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="isRecommend">
          <i-switch
            v-model="row.isRecommend === 1"
            @on-change="updateRecommend(row)"
          >
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </template>
        <template slot-scope="{ row, index }" slot="kuaishouGroup">
          <div v-if="row.isToKs != 1">
            待上架
          </div>
          <i-switch
            v-else
            :value="row.isKsUpShelf == 1"
            @on-change="updateKuaishouGroup(row)"
          >
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </template>

        <template slot-scope="{ row, index }" slot="freightRule">
          <span v-if="row.freightRule == 1">固定运费</span>
          <span v-if="row.freightRule == 2">运费模板</span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="showGoodsOpe(1, row)"
            >查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="showGoodsOpe(3, row)"
            >编辑
          </Button>

          <Dropdown transfer trigger="click">
            <Button size="small">
              <Icon type="ios-more" size="22" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem @click.native="kuaishouOpe(row)">
                快手团购
              </DropdownItem>
              <DropdownItem
                v-if="row.isUpShelf === 0"
                @click.native="singleOpe(row)"
                >上架
              </DropdownItem>
              <DropdownItem
                v-if="row.isUpShelf === 1"
                @click.native="singleOpe(row)"
                >下架
              </DropdownItem>
              <DropdownItem
                v-if="row.isUpShelf === 2"
                @click.native="singleOpe(row)"
                >上架
              </DropdownItem>

              <DropdownItem @click.native="isDelUser(row)">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>

    <!--显示模态框-->
    <goods-ope
      ref="goodsOpe"
      @changeDate="findList"
      :freightList="freightList"
    ></goods-ope>
    <kuaishou-ope ref="kuaishouOpeRef" @changeDate="findList"></kuaishou-ope>
  </div>
</template>

<script>
import hsBreadcrumb from "@/components/hs-breadcrumb";
import goodsOpe from "./components/goods-ope";
import kuaishouOpe from "./components/kuaishou-ope.vue";

export default {
  name: "goods",
  data() {
    return {
      total: 0,
      dateInit: "",
      isTableLoading: false,
      freightList: [],
      goodsTypeData: [],
      // 参数
      params: {
        page: 1,
        rows: 10,
        goodsName: "",
        freightRule: "",
        goodsTypeName: "",
        goodsType: [],
        isUpShelf: "",
        startTime: "",
        endTime: "",
        isRecommend: "",
        isClassic: "",
        isToKs: "",
      },
      // 商品上下架参数
      upAndDownParams: {
        goodsMallIdList: "",
        isUpShelf: "",
      },
      upGoodsParams: {},
      // 选中数据
      selectData: [],
      // 表格列
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "ID",
          minWidth: 120,
          key: "goodsMallId",
        },
        {
          title: "商品名称",
          minWidth: 280,
          key: "goodsName",
          ellipsis: true,
        },
        {
          title: "商品分类",
          minWidth: 260,
          key: "goodsTypeName",
        },
        {
          title: "市场价（元）",
          minWidth: 120,
          key: "purchasePrice",
        },
        {
          title: "售价（元）",
          minWidth: 120,
          key: "price",
        },
        {
          title: "运费类型",
          minWidth: 120,
          slot: "freightRule",
        },
        {
          title: "上架状态",
          slot: "isUpShelf",
          align: "center",
          width: 120,
        },
        {
          title: "经典花束",
          minWidth: 120,
          align: "center",
          slot: "isClassic",
        },
        {
          title: "店长推荐",
          minWidth: 120,
          slot: "isRecommend",
        },
        {
          title: "快手团购",
          minWidth: 120,
          slot: "kuaishouGroup",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 150,
        },
        {
          title: "操作",
          slot: "action",
          width: 180,
          align: "center",
        },
      ],
      // 表格数据
      data: [],
      // 面包屑
      breadcrumb: [
        { name: "首页", url: "", icon: "ios-home-outline", size: 18 },
        { name: "系统管理", url: "", icon: "", size: 0 },
        { name: "商品列表", url: "", icon: "", size: 0 },
      ],
    };
  },
  created() {
    // 商品-列表查询
    this.findList();
    // 运费模板-查询运费模板
    this.queryFreight();
  },
  mounted() {
    // 查询商品分类接口
    this.queryMallGoodsTypeListV2();
  },
  methods: {
    // 商品-列表查询
    findList() {
      this.isTableLoading = true;
      this.axios.post("/goodsMall/findList", this.params).then((res) => {
        console.log(res);
        this.isTableLoading = false;
        if (res.status == 200) {
          this.total = res.data.total;
          this.data = res.data.rows;
        }
        if (res.status == 201) {
          this.$Message.error(res.msg);
        }
        if (res.status == 500) {
          this.$Notice.error({
            title: "服务器内部错误",
            desc: "查询商品列表接口报错",
            duration: 0,
          });
        }
      });
    },
    // 商城分类-查询商城分类列表V2
    queryMallGoodsTypeListV2() {
      this.axios
        .post("/mallGoodsType/queryMallGoodsTypeListV2", {
          isDisable: 0,
          page: 1,
          rows: 100000,
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.goodsTypeData = res.data;
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "查询商品分类接口报错",
              duration: 0,
            });
          }
        });
    },
    // 商品-上下架商品
    upShelfGoods() {
      this.axios
        .post("/goodsMall/upShelfGoods", this.upAndDownParams)
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findList();
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "上下架商品接口报错",
              duration: 0,
            });
          }
        });
    },
    // 商品-修改是否经典花束
    updateClassic(row) {
      var isClassic = row.isClassic === 1 ? 0 : 1;
      this.axios
        .post("/goodsMall/upClassic", {
          goodsMallId: row.goodsMallId,
          isClassic: isClassic,
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findList();
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "修改是否经典花束接口报错",
              duration: 0,
            });
          }
        });
    },
    // 商品-修改是否经典花束
    updateRecommend(row) {
      var isRecommend = row.isRecommend === 1 ? 0 : 1;
      this.axios
        .post("/goodsMall/upRecommend", {
          goodsMallId: row.goodsMallId,
          isRecommend: isRecommend,
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findList();
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "修改是否店长推荐接口报错",
              duration: 0,
            });
          }
        });
    },
    updateKuaishouGroup(row) {
      this.axios
        .post("/ks/v1/product/changestatus", {
          goodsIds: String(row.goodsMallId),
          opType: row.isKsUpShelf == 1 ? "2" : "1",
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findList();
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "修改是否店长推荐接口报错",
              duration: 0,
            });
          }
        });
    },
    // 是否删除商品
    isDelUser(row) {
      // console.log(row)
      this.$Modal.confirm({
        title: `是否删除商品${row.goodsName}？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.deleteGoods(row);
        },
        onCancel: () => {
          this.$Message.info("您点击了取消.");
        },
      });
    },
    // 删除商品
    deleteGoods(row) {
      this.$Spin.show();
      this.axios
        .post("/goodsMall/deleteGoods", {
          goodsMallId: row.goodsMallId,
        })
        .then((res) => {
          console.log(res);
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$Message.success("操作成功.");
            this.findList();
          }
          if (res.status == 201) {
            // this.$Message.error(res.msg);
            this.$Notice.error({
              title: "删除商品失败",
              desc: res.msg,
            });
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "删除商品接口报错",
              duration: 0,
            });
          }
        });
    },
    // 运费模板-查询运费模板
    queryFreight() {
      this.axios
        .post("/freight/queryFreight", {
          page: 1,
          rows: 100000,
        })
        .then((res) => {
          console.log(res);
          if (res.status == 200) {
            this.freightList = res.data.rows;
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: "服务器内部错误",
              desc: "查询运费模板接口报错",
              duration: 0,
            });
          }
        });
    },
    // 选中商品
    selectGoodsType(value, selectedData) {
      if (selectedData.length) {
        this.params.goodsTypeName = selectedData[2].label;
      } else {
        this.params.goodsTypeName = "";
      }
    },
    // 显示操作模态框
    showGoodsOpe(type, row) {
      /**
       * type判断
       * 1.查看 2.新增 3.编辑
       */
      this.$refs.goodsOpe.show(type, row);
    },
    // 日期条件赋值
    changeDate(e) {
      this.params.startTime = e[0];
      this.params.endTime = e[1];
    },
    // 重置筛选条件
    resetScreen() {
      this.params.goodsName = "";
      this.params.freightRule = "";
      this.params.goodsTypeName = "";
      this.params.goodsType = [];
      this.params.isUpShelf = "";
      this.params.isClassic = "";
      this.params.isRecommend = "";
      this.params.startTime = "";
      this.params.endTime = "";
      this.dateInit = "";
    },
    // 改变页数
    changePage(e) {
      this.params.page = e;
      this.findList();
    },
    // 改变页容量
    changePageSize(e) {
      this.params.rows = e;
      this.findList();
    },
    // 在多选模式下有效，选中某一项时触发
    selectTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，取消选中某一项时触发
    selectCancelTable(selection, row) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击全选时触发
    selectAllTable(selection) {
      this.selectData = selection;
    },
    // 在多选模式下有效，点击取消全选时触发
    selectAllCancelTable(selection) {
      this.selectData = selection;
    },
    kuaishouOpe(row) {
      this.$refs.kuaishouOpeRef.show(row);
      // this.$router.push({
      //   path: "/index/kuaishou-ticket-management",
      //   query: { id: row.id },
      // });
    },
    // 上下架商品
    singleOpe(row) {
      this.upAndDownParams.goodsMallIdList = row.goodsMallId;
      this.upAndDownParams.isUpShelf =
        row.isUpShelf == 2 ? 1 : row.isUpShelf == 0 ? 1 : 0;
      this.upShelfGoods();
    },
    // 批量上下架商品
    batchOpe(type) {
      if (!this.selectData.length) {
        this.$Message.error("至少选择一个商品");
        return false;
      }
      let arr = [];
      this.selectData.forEach((v) => {
        arr.push(v.goodsMallId);
      });
      this.upAndDownParams.goodsMallIdList = arr.join(",");
      this.upAndDownParams.isUpShelf = type;

      this.$Modal.confirm({
        title: `确定${type == 0 ? "下架" : "上架"}选中的商品？`,
        onOk: () => {
          // this.$Message.info('您点击了确定.');
          this.upShelfGoods();
        },
        onCancel: () => {
          this.$Message.info("您点击了取消.");
        },
      });
    },
  },
  components: {
    hsBreadcrumb,
    goodsOpe,
    kuaishouOpe,
  },
};
</script>

<style scoped></style>
